<template>
	<view>
		<view class="">
			<view class="content">
				<!-- 					@tap="tapMap" -->
				<map id="map1" ref="map1" style="width: 100%;" :layer-style="5" :style="{ height: aMapHeight }"
					:show-location="true" :latitude="latitude" :longitude="longitude" :markers="marker" :scale="scale"
					:circles="circles" @markertap="markertap" @callouttap="callouttap" :polyline="polyline">
					<controls :style="{
							position: 'absolute',
							left: '44rpx',
							top: statusBarHeight
						}">
						<!-- @click="$pub.go('/pages/my/my')" -->
						<view class="row">
							<image :src="userInfo.uavatar || '/static/img/my/12.png'" @click="showAddFriendOpen()"
								mode="" style="width: 84rpx;height: 84rpx;border-radius: 50%;"></image>
						</view>
					</controls>
					<controls :style="{
							position: 'absolute',
							left: '176rpx',
							top: statusBarHeight
						}">
						<view class="" style="width: 360rpx;height: 82rpx;">
							<!-- s1 -->
							<view class="" v-show="s1">
								<u-search
									customStyle="opacity: 0.5;box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0,0,0,0.16);border-radius: 42rpx 42rpx 42rpx 42rpx;"
									:height="41" :showAction="false" placeholder="搜索" v-model="keyword" color="#7976E9"
									:clearabled="true" searchIconColor="#7d7d7d" borderColor="#DDDDDD"
									bgColor="#ffffff"></u-search>
							</view>
							<!-- s2 -->
							<view class="" v-show="s2" style="z-index: 9999;">
								<view class="mySearch flex flex-around">
									<view class="flex-cen">
										<view class="mr6">我的家庭</view>
										<image src="/static/img/my/17.png" mode="" style="width: 26rpx;height: 26rpx;">
										</image>
									</view>
									<view class="">
										<u-icon v-if="s2" name="arrow-down-fill" @click="dowm()"></u-icon>
										<!-- @click="open2()" -->
										<!-- <u-icon v-else name="arrow-up-fill" @click="open2()"></u-icon> -->
									</view>
								</view>
							</view>
						</view>
					</controls>
					<controls :style="{
							position: 'absolute',
							left: '624rpx',
							top: statusBarHeight
						}">
						<view class="">
							<view class="flex-column ">
								<!--  -->
								<view class="mt100"></view>
								<!--  -->
								<view class="">
									<!--  -->
									<view @click="showChange" class="flex-cen"
										style="width: 84rpx;height: 84rpx;background-color: #f9f9f9;border-radius:50%">
										<image src="/static/img/index/145.svg" mode=""
											style="width: 40rpx;height: 40rpx;"></image>
									</view>
									<view class="tip flex-column animate__animated  animate__fadeIn" v-if="show4">
										<view class="triangle"></view>
										<!-- 										<view class="flex-cen" style="height: 105rpx;">
											<image src="/static/img/index/54626.svg" mode="" style="width: 38rpx;height: 26rpx;"></image>
											<view class="ml20 size_34 color_fff">发起圈聊</view>
										</view> -->
										<view class="flex-cen" style="height: 105rpx;">
											<image src="/static/img/index/54628.svg" mode=""
												style="width: 39rpx;height: 36rpx;"></image>
											<view class="ml20 size_34 color_fff"
												@click="$pub.go('/pages/addFriend/addFriend')">添加圈友</view>
										</view>
										<view class="flex flex-align" style="height: 105rpx;">
											<image class="ml36 mr20" src="/static/img/index/54630.svg" mode=""
												style="width: 39rpx;height: 39rpx;"></image>
											<view class="size_34 color_fff" @click="qrCode">扫一扫</view>
										</view>
									</view>
								</view>
								<!--  -->
								<!--@click="open1()" -->
								<view class="flex-cen" style="width: 84rpx;height: 84rpx;">
									<!-- 切换图片 -->
									<image class="mt48" v-if="!show4" @click="showLa()" :src="picChange"
										style="width: 84rpx;height: 84rpx;" mode=""></image>
								</view>

								<!-- <view class="mt48" @click="showLa()"></view> -->
								<!--  -->
							</view>
						</view>
					</controls>
					<!--delete  -->
					<!-- 					<controls style="position: absolute;left:624rpx;top:40%">
						<view class="row" @click="open()"><image src="/static/img/baseline-bubble_chart-24px.png" mode="" style="width: 48rpx;height: 48rpx;"></image></view>
					</controls> -->
					<!--  -->
					<controls style="position: absolute;left:34rpx;top:75%;">
						<!-- 						<view class="row31" >
							<view class="flex flex-align">
								<view class="mr28"><image src="/static/img/index/54385.svg" mode="" style="width: 40rpx;height: 45rpx;"></image></view>
								<view class="color_fff size_30 mr6" >
									连接设备
								</view>
								<view class="color_fff size_16 ms20" >
									未连接
								</view>
							</view>
						</view> -->
						<view class="flex-cen" style="width: 84rpx;
											height: 84rpx;
											background: #8B8B8B;
											box-shadow: 0rpx 4rpx 12rpx 2rpx rgba(0,0,0,0.1);
											border-radius: 42rpx 42rpx 42rpx 42rpx;
											opacity: 1;">
							<view class="flex-column flex-cen" @click="open3()">
								<image src="/static/img/index/54632.svg" mode="" style="width: 38rpx;height: 32rpx;">
								</image>
								<view class="size_12 mt8">未连接</view>
							</view>
						</view>
					</controls>
					<controls style="position: absolute;left:34rpx;top:85%;">
						<view class="row3" @click="open()">
							<view class="flex">
								<view class="mr28">
									<image src="/static/img/index/54385.svg" mode=""
										style="width: 40rpx;height: 47rpx;"></image>
								</view>
								<u--text color="#9E61F6" size="30rpx" text="附近"></u--text>
							</view>
						</view>
					</controls>
					<controls style="position: absolute;left:624rpx;top:85%;">
						<!--  -->
						<!-- <view class="" @click="getUserGps()">上传位置</view> -->
						<!-- <view class="" @click="getNearUser()">获取附近人</view> -->
						<view class="" @click="getUserTrack()">获取轨迹</view>
						<view class="flex-cen" style="
								width: 82rpx;
								height: 82rpx;
								border-radius: 50%;
								background: #FFFFFF;
								box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0,0,0,0.16);
								opacity: 1;">
							<image @click="getGps()" src="/static/img/index/baseline-my_location-24px.svg" mode=""
								style="width: 48rpx;height: 48rpx;"></image>
						</view>
					</controls>

					<!-- <controls style="position: absolute;left:500rpx;top:85%;"><view class="" @click="$pub.go('/pages/circleSet/circleSet')">设置群</view></controls> -->

					<!-- 下拉 再下拉框 -->
					<bab-Touchbox v-show="show3" :minHeight="0.3" :maxHeight="0.7" :touchHeight="0"
						@currentHeight="setScrollHeight" @maxtHeight="setScrollViewHeight">
						<!-- title -->
						<view class="flexRow">
							<view class="flex-start flex-align  mt26 ">
								<view class="mr14 size_42">圈子成员</view>
								<view class="mr156">
									<image src="/static/img/index/54886.svg" mode=""
										style="width: 43rpx;height: 43rpx;"></image>
								</view>
								<view class="">
									<image src="/static/img/index/54951.svg" mode=""
										style="width: 253rpx;height: 151rpx;"></image>
								</view>
							</view>
						</view>
						<!-- scroll -->
						<scroll-view :style="{ height: scrollViewHeight - 84 + 'px' }" scroll-y="true">
							<view class="ml34 mt10" v-for="item in 9" :key="item">
								<view class="flex-align">
									<view class="mr12" style="
							                    border-radius: 50%;
							                    width: 16rpx;
							                    height: 16rpx;
							                    background: #00FF19;
							                    opacity: 1;"></view>
									<view class="mr24">
										<image src="/static/img/my/12.png" mode=""
											style="width: 100rpx;height: 100rpx;"></image>
									</view>
									<view class="flex-column">
										<view class="flex ms10">
											<view class="size_32 mr4">王越</view>
											<view class="color_FF size_32">圈主</view>
										</view>
										<view class="ms4 size_26">铜鼓路附近</view>
										<view class="size_26">到位置时间 14：03</view>
									</view>
									<view class="">
										<image src="/static/img/index/54949.svg" mode=""
											style="width: 258rpx;height: 163rpx;"></image>
									</view>
								</view>
								<view style="opacity: 1;border: 2rpx solid #F7F7F7;"></view>
							</view>
						</scroll-view>
					</bab-Touchbox>

					<!--  -->

					<!-- 下拉1 附近 -->
					<view class="" @touchmove.stop.prevent="() => {}">
						<u-popup :round="33" :overlay="true" :safeAreaInsetBottom="true" :show="show" mode="bottom"
							@close="close22" @open="open" :closeable="false" :closeOnClickOverlay="true"
							:overlayOpacity="0">
							<view class="u-popup-slot fujin1">
								<!-- 搜索框 -->
								<view class="ml32  mr22 mt66">
									<view class="flex flex-align">
										<view class="flex flex-align" style="width: 604rpx;
										height: 68rpx;
										background: #F1F1F1;
										border-radius: 26rpx 26rpx 26rpx 26rpx;
										opacity: 1;">
											<image class="ml26 mr10" src="/static/img/video/21.svg" mode=""
												style="width: 35rpx;height: 35rpx;"></image>
											<input type="text" placeholder="搜索" style="width: 500rpx;" />
											<image class="mr26" src="/static/img/video/Dictation.svg" mode=""
												style="width: 24rpx;height: 38rpx;"></image>
										</view>
										<view class="ml34  flex-cen" style="width: 68rpx;
											height: 68rpx;
											background: #F1F1F1;
											border-radius: 50%;
											opacity: 1;">
											<u-icon size="20" name="close" @click="close22()"></u-icon>
										</view>
									</view>
								</view>
								<!--tagChange  -->
								<view class="">
									<view class="ml32 mr32 mt24">
										<view class="flex-start">
											<!-- 单选 -->
											<view class="u-page__tag-item mr20" v-for="(item, index) in radios"
												:key="index">
												<u-tag shape="circle" :text="item.name" borderColor="#DDDDDD"
													bgColor="#EDEEF0" color="#000" :plain="!item.checked" :name="index"
													@click="radioClick"></u-tag>
											</view>
										</view>
									</view>
								</view>
								<!--  scroll-view -->
								<view class=" ml32 mr32">
									<view class="">
										<scroll-view scroll-y="true" style="height: 800rpx;">
											<!-- tag1 -->
											<!-- v-if="radios[0].checked" -->
											<view v-if="false" class="video  mt40" v-for="item in 5" :key="item">
												<view class="ml16 pt14">
													<view class="flex-start">
														<view class="flex-cen mr16" style="width: 120rpx;
															height: 120rpx;
															background: #FFFFFF;
															opacity: 1;
															border: 4rpx solid #6900D7;
															border-radius: 50%;
															">
															<image
																src="/static/img/video/18a5ffda08166072ddbaa1ae8137e43a.svg"
																mode="" style="width: 100rpx;height: 100rpx;"></image>
														</view>
														<view class="flex-column">
															<view class="size_30">The MixC 万象天地</view>
															<view class="size24 color_68">购物中心</view>
															<view class="size24 color_68">250米</view>
														</view>
													</view>
												</view>
												<view class="">
													<view class="">
														<view class="">
															<u-scroll-list :indicator="false">
																<view v-for="(item, index) in list" :key="index">
																	<image
																		src="/static/img/video/03b2eaf4883948936cb812ceeab50ad6.svg"
																		style="width: 240rpx;height: 428rpx;" mode="">
																	</image>
																	<!-- <image :src="item.thumb" mode="" style="width: 240rpx;height: 428rpx;"></image> -->
																</view>
															</u-scroll-list>
														</view>
													</view>
												</view>
											</view>
											<!-- tag2 -->
											<!-- v-if="radios[1].checked" -->
											<view class="" v-if="true">
												<view class="ml36 mr30  mt50"
													v-for="(item, index) in nearbyGroupData.records" :key="item">
													<view class="flex-around">
														<view class="1"
															style="position: relative;height: 96rpx;width: 96rpx;">
															<image :src="item.uavatar || '/static/img/my/12.png'"
																mode=""
																style="width: 62rpx;height: 62rpx;position: absolute;">
															</image>
															<image src="/static/img/my/12.png" mode=""
																style="width: 62rpx;height: 62rpx;position: absolute;top: 34rpx;left: 34rpx;">
															</image>
														</view>
														<view class="2">
															<view class="flex-column">
																<view class="flex-between ms8">
																	<view class="langRen">{{ item.uname }}</view>
																	<view class="num">
																		({{ item.ucurrentSize }}/{{ item.ugroupSize }})
																	</view>
																</view>
																<view class="flex-cen ">
																	<view class="nanShan">南山大厦附近</view>
																	<view class="nanShan">> 400m 南山</view>
																</view>
																<view class="play mt12">{{ item.udescription }}</view>
															</view>
														</view>
														<!--  -->
														<view class="btn3 flex-cen">
															<view class="">
																<view class="flex-cen">
																	<image class="mr16" src="/static/img/fujin/208.png"
																		mode="" style="width:31rpx;height: 31rpx;">
																	</image>
																	<view class=" add">加入</view>
																</view>
															</view>
														</view>
													</view>
													<view class="line mt34"></view>
												</view>
												<view class="flex-cen">
													<view class="size_30 color_C9">更多圈子</view>
												</view>
											</view>
										</scroll-view>
									</view>
								</view>
							</view>
							<!-- <view class="test"></view> -->
						</u-popup>
					</view>

					<!-- 下拉2  圈子成员  废案 -->
					<view class="" @touchmove.stop.prevent="() => {}" style="display: none;">
						<u-popup :zIndex="900" :round="33" :overlay="true" :safeAreaInsetBottom="true" :show="show1"
							mode="bottom" @close="close1" @open="open1" :closeable="false" :closeOnClickOverlay="true"
							:overlayOpacity="0">
							<view class="u-popup-slot ">
								<view class="">
									<view class="">
										<view class="">
											<!-- 1 -->
											<view class="flex mt84 ml46 mr54">
												<view class="mr274 size_42">圈子成员</view>
												<view class="flex-cen" style="width: 208rpx;
														height: 82rpx;
														background: #7976E9;
														border-radius: 42rpx 42rpx 42rpx 42rpx;
														opacity: 1;">
													<image class="mr18" src="/static/img/indexCircle/122.png" mode=""
														style="width: 50rpx;height: 37rpx;"></image>
													<view class="color_fff size_24">圈聊</view>
												</view>
											</view>
											<!-- 2 -->
											<scroll-view scroll-y="true" style="height: 1000rpx;">
												<view class="ml34" v-for="item in 10" :key="item">
													<view class="">
														<view class="flex-align">
															<view class="mr12" style="
														border-radius: 50%;
														width: 16rpx;
														height: 16rpx;
														background: #00FF19;
														opacity: 1;"></view>
															<view class="mr24">
																<image src="/static/img/my/12.png" mode=""
																	style="width: 100rpx;height: 100rpx;"></image>
															</view>
															<view class="flex-column">
																<view class="flex">
																	王越
																	<view class="color_FF">圈主</view>
																</view>
																<view class="">铜鼓路附近</view>
																<view class="">到位置时间 14：03</view>
															</view>
														</view>
													</view>
												</view>
											</scroll-view>
										</view>
									</view>
								</view>
								<view class="test"></view>
							</view>
						</u-popup>
					</view>
					<!-- 3  上拉框-->
					<u-popup mode="top" overlayOpacity="0" safeAreaInsetTop="true" :show="show2" @close="close2"
						@open="open2">
						<view class="">
							<!-- 1 -->
							<view class="ms20">
								<view class="">
									<view class="flex flex-align flex-start">
										<!-- 										<view
											class="flex-cen mr40 ml44 "
											style="width: 82rpx;height: 82rpx;border-radius: 50%;
										box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0,0,0,0.16);"
										>
											<image src="/static/img/index/54383.svg" style="width: 44rpx;height: 42rpx;" mode=""></image>
										</view> -->
										<view class="row ml44 mr40">
											<image src="/static/img/my/12.png" mode=""
												style="width: 84rpx;height: 84rpx;"></image>
										</view>
										<view class="">
											<view class="mySearch flex flex-around">
												<view class="flex-cen">
													<view class="mr6">我的家庭</view>
													<image src="/static/img/my/17.png" mode=""
														style="width: 26rpx;height: 26rpx;"></image>
												</view>
												<view class="">
													<u-icon v-if="show3" name="arrow-down-fill"
														@click="dowm()"></u-icon>
													<u-icon v-if="!show3" name="arrow-up-fill"
														@click="open2()"></u-icon>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<!-- 2 -->
							<view class="">
								<view class="">
									<!-- 1 -->
									<view class="pt12 ps12"
										style="background: #eae6f2;border-left: 12rpx solid #9E61F6;">
										<view class="">
											<u-row>
												<u-col :span="2">
													<view class="ml24 mr18">
														<image src="/static/img/createCc/Container.png" mode=""
															style="width: 93rpx;height: 93rpx;"></image>
													</view>
												</u-col>
												<u-col :span="8">
													<view class="flex-align">
														<view class="size_30 mr4">我的家庭</view>
														<image src="/static/img/index/baseline-favorite-24px.svg"
															mode="" style="width: 24rpx;height: 24rpx;"></image>
													</view>
												</u-col>
												<u-col :span="2">
													<view class="">
														<image src="/static/img/index/127.svg" mode=""
															style="width: 39rpx;height: 31rpx;"></image>
													</view>
												</u-col>
											</u-row>
										</view>
									</view>
									<!-- 2 -->
									<view class="pt12 ps12"
										style="background: #fcfaff;border-left: 12rpx solid #fcfaff;">
										<view class="">
											<u-row>
												<u-col :span="2">
													<view class="ml24 mr18">
														<image src="/static/img/createCc/Container.png" mode=""
															style="width: 93rpx;height: 93rpx;"></image>
													</view>
												</u-col>
												<u-col :span="8">
													<view class="flex-align">
														<view class="size_30 mr4">兄弟群</view>
														<image src="/static/img/index/baseline-favorite-24px.svg"
															mode="" style="width: 24rpx;height: 24rpx;"></image>
													</view>
												</u-col>
												<u-col :span="2">
													<!-- <view class=""><image src="/static/img/index/127.svg" mode="" style="width: 39rpx;height: 31rpx;"></image></view> -->
												</u-col>
											</u-row>
										</view>
									</view>
								</view>
							</view>
							<view class="h92 flex-cen" v-if="show6">
								<view class="flex-cen" style="width: 306rpx;
											height: 60rpx;
											background: #9D67F3;
											border-radius: 30rpx 30rpx 30rpx 30rpx;
											opacity: 1;">
									<view class="size_24  color_fff" @click="show6Change">加入邻圈</view>
								</view>
							</view>

							<view class="h254" v-else>
								<view class="flex-column flex-cen ">
									<view class="size_24 mt18 fb">输入圈码</view>
									<xskCodeInput :value.sync="password" :width="58" :height="82"
										backgroundColor="#F3EBFF" bold showVal :length="6" @confirm="inputConfirm">
									</xskCodeInput>
									<view class="flex mt20">
										<view class="flex-cen" style="width: 306rpx;
													height: 60rpx;
													background: #9D67F3;
													border-radius: 30rpx 30rpx 30rpx 30rpx;
													opacity: 1;">
											<!-- @click="$pub.go('/pages/createCircle/createCircle')" -->
											<view class="size_24  color_fff" @click="joinGroup">加入圈子</view>
										</view>
										<view class="" style="width: 40rpx;"></view>
										<view class="flex-cen " style="width: 306rpx;
													height: 60rpx;
													background: #9D67F3;
													border-radius: 30rpx 30rpx 30rpx 30rpx;
													opacity: 1;" @click="$pub.go('/pages_circle/addCircle/addCircle')">
											<view class="size_24  color_fff">更多圈子</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</u-popup>
					<!-- 4 检查设备 -->
					<u-popup mode="bottom" :overlay="true"
						:customStyle="{ 'box-shadow': '0rpx 6rpx 60rpx 2rpx rgba(0,0,0,0.16)' }" :overlayOpacity="0"
						:show="show5" @close="close3" @open="open3" :round="33">
						<view class="u-popup-slot ">
							<!-- 1 -->
							<view class="mt106 ms38 ml46 mr50">
								<view class="flex flex-align flex-between">
									<view class="size_42">设备</view>
									<view class="">设备列表</view>
								</view>
							</view>
							<!-- 2 -->
							<view class="ml36 mr44 ">
								<view class="flex-between">
									<view class="">
										<image src="/static/img/safe/17.svg" mode=""
											style="width: 254rpx;height: 184rpx;"></image>
									</view>
									<view class="flex-column">
										<view class=" flex-cen" style="width: 262rpx;
																height: 80rpx;
																background: #A054FE;
																box-shadow: 0rpx 4rpx 12rpx 2rpx rgba(0,0,0,0.1);
																border-radius: 40rpx 40rpx 40rpx 40rpx;
																opacity: 1;">
											<image class="mr16" src="/static/img/safe/54632.svg" mode=""
												style="width: 40rpx;height: 35rpx;"></image>
											<view class="size_30 color_fff">连接设备</view>
										</view>
										<view class="ml12 mt8 color_91">未连接</view>
										<view class="ml12 mt8">蓝牙定位器</view>
									</view>
								</view>
							</view>
							<!-- 3 -->
							<view class="flex-align ml62 mt60 ms74">
								<view class="flex-cen mr28" style="width: 100rpx;
								height: 100rpx;
								border-radius: 50%;
								background: #000000;
								opacity: 1;">
									<image src="/static/img/createCc/153.png" style="width: 39rpx;height: 39rpx;"
										mode=""></image>
								</view>
								<view class="size_32">添加设备</view>
							</view>
						</view>
					</u-popup>
					<!-- 5 添加好友消息页面 -->
					<u-popup mode="left" :overlay="true"
						:customStyle="{ 'box-shadow': '0rpx 6rpx 60rpx 2rpx rgba(0,0,0,0.16)', width: '250px' }"
						:overlayOpacity="0" :show="showAddFriend" @close="showAddFriendClose" @open="showAddFriendOpen">
						<view class="u-popup-slot ">
							<!--  -->
							<view class="" :style="{ height: statusBarHeight }"></view>
							<!-- content -->
							<view class="ml80">
								<!-- 1 -->
								<view class="" @click="$pub.go('/pages_person/personMessage/personMessage')">
									<!-- <image src="/static/img/index/b9ebecaa592ab6889864bbd24ecb2002.svg" mode="" style="width: 84rpx;height: 84rpx;"></image> -->
									<!-- text="北" -->
									<!-- randomBgColor -->
									<u-avatar :src="userInfo.uavatar" fontSize="18"></u-avatar>
								</view>
								<!-- 2 -->
								<view class="flex-column">
									<view class="mt32">{{ userInfo.unickName }}</view>
									<view class="mt2 color_A5">签名我的个性签名</view>
									<view class="flex mt16">
										<view class="flex-cen mr50">
											<view class="mr13">{{ userInfo.groupNumber }}</view>
											<view class="mr10">圈子</view>
											<image src="/static/img/index/lock_open.svg" mode=""
												style="width: 23rpx;height: 23rpx;"></image>
										</view>
										<view class="flex-cen">
											<view class="mr12">{{ userInfo.friendNumber }}</view>
											<view class="mr12">好友</view>
											<image src="/static/img/index/lock.svg" mode=""
												style="width: 23rpx;height: 23rpx;"></image>
										</view>
									</view>
								</view>
								<!-- 3 -->
								<view class="line mt38"></view>
								<!-- 4 -->
								<view class="mt52">
									<view class="flex flex-align" @click="$pub.go('/pages_user/my/my')">
										<image class="mr54" src="/static/img/index/155.svg" mode=""
											style="width: 36rpx;height: 40rpx;"></image>
										<view class="size_40">个人资料</view>
									</view>
									<view class="flex  flex-align mt50"
										@click="$pub.go('/pages_sysSet/settings/settings')">
										<image class="mr54" src="/static/img/index/440.svg" mode=""
											style="width: 36rpx;height: 37rpx;"></image>
										<view class="size_40">系统设置</view>
									</view>
								</view>
							</view>
							<!--  -->
						</view>
					</u-popup>
				</map>
			</view>

			<!-- 底部 -->
			<tabbar></tabbar>
		</view>
	</view>
</template>

<script>
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import xskCodeInput from '@/components/xsk-code-input/xsk-code-input';
	import {
		mapState, //先导入mapState方法
		mapMutations
	} from 'vuex';
	export default {
		mounted() {
			uni.hideTabBar();
		},
		/* 验证码 */
		components: {
			xskCodeInput
		},
		data() {
			return {
				statusBarHeight: statusBarHeight,
				/* 地图 */
				latitude: 23.106574, //纬度
				longitude: 113.324587, //经度
				nowLatitude: 0,
				nowLongitude: 0,
				scale: 13, //缩放级别
				bottomData: false,
				marker: [{
						id: 0,
						latitude: 23.13065, //纬度
						longitude: 113.3274, //经度
						iconPath: '', //显示的图标
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						//   title:'我在这里',//标注点名
						alpha: 0.5, //透明度
						callout: {
							//自定义标记点上方的气泡窗口 点击有效
							content: '天宝大厦', //文本
							color: '#ffffff', //文字颜色
							fontSize: 14, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '10',
							bgColor: '#9f5bfa', //背景颜色
							display: 'ALWAYS' //常显
						}
					},
					{
						id: 0,
						latitude: 23.13065, //纬度
						longitude: 113.3274, //经度
						iconPath: '', //显示的图标
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						//   title:'我在这里',//标注点名
						alpha: 0.5, //透明度
						callout: {
							//自定义标记点上方的气泡窗口 点击有效
							content: '天宝大厦', //文本
							color: '#ffffff', //文字颜色
							fontSize: 14, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '10',
							bgColor: '#9f5bfa', //背景颜色
							display: 'ALWAYS' //常显
						}
					},
					{
						id: 1,
						latitude: 23.106574, //纬度
						longitude: 113.324587, //经度
						iconPath: '', //显示的图标
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						//  title:'我在这里',//标注点名
						alpha: 0.5, //透明度
						//      label:{//为标记点旁边增加标签   //因背景颜色H5不支持
						//   color:'red',//文本颜色
						//      },
						callout: {
							//自定义标记点上方的气泡窗口 点击有效
							content: '广州塔', //文本
							color: '#ffffff', //文字颜色
							fontSize: 14, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '10',
							bgColor: '#9f5bfa', //背景颜色
							display: 'ALWAYS' //常显
						}
					},
					{
						id: 2,
						latitude: 23.1338, //纬度
						longitude: 113.33052, //经度
						iconPath: '', //显示的图标
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						alpha: 0.5, //透明度
						callout: {
							//自定义标记点上方的气泡窗口 点击有效
							content: '德隆大厦', //文本
							color: '#ffffff', //文字颜色
							fontSize: 14, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '10',
							bgColor: '#9f5bfa', //背景颜色
							display: 'ALWAYS' //常显
						}
					},
					{
						id: 3,
						latitude: 23.136455, //纬度
						longitude: 113.329002, //经度
						iconPath: '', //显示的图标
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						alpha: 0.5, //透明度
						callout: {
							//自定义标记点上方的气泡窗口 点击有效
							content: '羊城国际商贸中心', //文本
							color: '#ffffff', //文字颜色
							fontSize: 14, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '10',
							bgColor: '#9f5bfa', //背景颜色
							display: 'ALWAYS' //常显
						}
					},
					{
						id: 4,
						latitude: 23.224781, //纬度
						longitude: 113.293911, //经度
						iconPath: '', //显示的图标
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						alpha: 0.5, //透明度
						callout: {
							//自定义标记点上方的气泡窗口 点击有效
							content: '天瑞广场A座', //文本
							color: '#ffffff', //文字颜色
							fontSize: 16, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '12',
							bgColor: '#9f5bfa', //背景颜色
							display: 'ALWAYS' //常显
						}
					},
					{
						id: 5,
						latitude: 23.072726, //纬度
						longitude: 113.277921, //经度
						iconPath: '/static/img/index/54171.png', //显示的图标
						rotate: 0, // 旋转度数
						width: 55, //宽
						height: 70, //高
						alpha: 1, //透明度
						controls: [{
							//在地图上显示控件，控件不随着地图移动
							id: 31, //控件id
							iconPath: '/static/logo.png', //显示的图标
							position: {
								//控件在地图的位置
								left: 50,
								top: 50,
								width: 55,
								height: 70
							}
						}]
					}
				],
				circles: [{
					//在地图上显示圆
					latitude: 40.013,
					longitude: 118.685,
					fillColor: '#000', //填充颜色
					color: '#0016ca', //描边的颜色
					radius: 20, //半径
					strokeWidth: 2 //描边的宽度
				}],
				polyline: [{
					//指定一系列坐标点，从数组第一项连线至最后一项
					points: [{
							latitude: 23.13065,
							longitude: 113.3274
						},
						{
							latitude: 23.106574,
							longitude: 113.324587
						}
					],
					color: '#A054FE', //线的颜色
					width: 4, //线的宽度
					dottedLine: false, //是否虚线
					arrowLine: true //带箭头的线 开发者工具暂不支持该属性
				}],

				/* 搜索 */
				keyword: '',

				/* 下拉 */
				/* 附近 */
				show: false,
				/* 圈子成员 废案 */
				// show1: false,
				/* 我的家庭上拉 */
				show2: false,
				/* 圈子成员 */
				show3: false,
				/* 扫一扫 */
				show4: false,
				/* 检查设备 */
				show5: false,
				/* 加入邻圈切换 */
				show6: true,
				/* 添加好友消息也 */
				showAddFriend: false,
				/* 搜索显示 */
				s1: true,
				s2: false,
				/* 我的家庭上拉切换 */
				upChange: true,
				/* 高度 */
				aMapHeight: 0,

				/* 单选标签 */
				radios: [
					// {
					// 	name: '附近视频',
					// 	checked: false
					// },
					{
						name: '附近圈子',
						checked: true
					}
				],

				/* 滚动 */
				list: [{
						thumb: '/satic/img/video/03b2eaf4883948936cb812ceeab50ad6.svg'
					},
					{
						thumb: '/satic/img/video/b69dfc62685f99ab5e1b50a5993df1f6.svg'
					},
					{
						thumb: '/satic/img/video/d4f992fb28b214add080eef18e1c30e8.svg'
					},
					{
						thumb: '/satic/img/video/d4f992fb28b214add080eef18e1c30e8.svg'
					},
					{
						thumb: '/satic/img/video/d4f992fb28b214add080eef18e1c30e8.svg'
					}
				],
				/*  */
				scrollViewHeight: 0, //用于计算滚动区域高度
				currentHeight: 0, // 滑动组件当前高度
				/* 邀请码 */
				password: '',
				/* 切换图片 */
				picChange: '/static/img/index/548832.svg',
				/* 地图对象 */
				mapContext: {},

				/* 附近圈子定时器 */
				timer: null,
				nearbyGroupData: {},
				/* 定位定时器 */
				gpsTimer: null,

				/* 附近人消息 */
				nearByPeopleData: []
			};
		},
		computed: {
			...mapState('websocket', ['messageList']),
			...mapState('user', ['userInfo']),
			mapheight: {
				// getter
				get: function() {
					console.log('get');
					// return (this.aMapHeight = 90 + 'vh');
					return (this.aMapHeight = 91 + 'vh');
					// return (this.aMapHeight = 100 + 'vh');
				},
				// setter
				set: function(newValue) {
					console.log('set');
					console.log(this.aMapHeight);
					this.aMapHeight = newValue + 'vh';
				}
			},
			// let data = ''
			// if (this.bottomData) {
			// 	if (this.upTop) {
			// 		data = '50px'
			// 	} else {
			// 		data = '200px'
			// 	}
			// } else {
			// 	console.log(100);
			// 	data = '91vh'
			// 	// data = '100vh'
			// }
			// data = '91vh'
			// return data
			coverbottom() {
				let data = '';
				if (this.bottomData) {
					data = '20rpx';
				} else {
					data = '100rpx';
				}
				return data;
			}
		},
		onShow() {
			console.log(this.$store, 'store');
			console.log(this.messageList, 'messageList');

			//创建地图对象
			this.mapContext = uni.createMapContext('map1', this);
			//获取当前位置经纬度
			let that = this;
			this.gpsTimer = setInterval(() => {
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						that.longitude = res.longitude;
						that.latitude = res.latitude;
						that.getUserGps();
						that.getNearUser();
					}
				});
			}, 10000);

			this.getNearbyGroup();
			// 	this.timer = setInterval(() => {

			// 	}, 2000);
		},
		// 监听页面卸载
		onHide() {
			let that = this;
			clearInterval(that.timer);
			clearInterval(that.gpsTimer);
		},
		methods: {
			/* 上传用户位置 */
			async getUserGps() {
				let data = {
					distence: 2,
					latitude: this.latitude,
					longitude: this.longitude
				};
				await this.$API.userApi.getUserGps(data);
			},
			/* 获取附近人 */
			async getNearUser() {
				let re = await this.$API.userApi.getNearUser(2, this.latitude, this.longitude);
				console.log(re, 're');
				console.log(this.nearByPeopleData, 'this.nearByPeopleData');
				this.nearByPeopleData = re;
				let obj = {};
				let newData = this.nearByPeopleData.map(i => {
					return {
						id: i.userId,
						latitude: i.position.latitude,
						longitude: i.position.longitude,
						iconPath: i.uavatar,
						width: 20,
						height: 30,
						rotate: 0,
						alpha: 0.5
					};
				});
				console.log(newData, 'newData');
				this.marker = newData;
			},
			/* 自己走过的轨迹 */
			async getUserTrack() {
				console.log('轨迹');
				let re = await this.$API.userApi.getUserTrack();
				let lineArr = re;
				lineArr.map(i => {
					return {
						latitude: i.latitude,
						longitude: i.longitude
					};
				});
				polyline: [{
						//指定一系列坐标点，从数组第一项连线至最后一项
						points: [{
								latitude: 23.13065,
								longitude: 113.3274
							},
							{
								latitude: 23.106574,
								longitude: 113.324587
							}
						],
						color: '#A054FE', //线的颜色
						width: 4, //线的宽度
						dottedLine: false, //是否虚线
						arrowLine: true //带箭头的线 开发者工具暂不支持该属性
					}],
					console.log(re, 're');
			},
			/* 附近群聊 */
			async getNearbyGroup() {
				let re = await this.$API.groupApi.nearbyGroup();
				console.log(re, 're');
				this.nearbyGroupData = re;
			},

			/* 邀请码加群 */
			async joinGroup() {
				if (!this.password.trim()) {
					uni.showToast({
						title: '不能为空'
					});
					return;
				}
				let re = await this.$API.usertoGroupApi.addGroupByUcode(this.password);
				uni.showToast({
					title: '加入成功'
				});
			},

			tapMap(e) {
				var that = this;
				console.log(e, 'eeee');
				let {
					latitude,
					longitude
				} = e.detail;
				this.nowLatitude = latitude;
				this.nowLongitude = longitude;
				console.log(latitude);
				console.log(longitude);
				let newMarker = {
					id: Math.random() * 10,
					latitude: latitude, //纬度
					longitude: longitude, //经度
					iconPath: '', //显示的图标
					rotate: 0, // 旋转度数
					width: 20, //宽
					height: 30, //高
					//   title:'我在这里',//标注点名
					alpha: 0.5, //透明度
					callout: {
						//自定义标记点上方的气泡窗口 点击有效
						content: '导航', //文本
						color: '#ffffff', //文字颜色
						fontSize: 14, //文本大小s
						borderRadius: 15, //边框圆角
						borderWidth: '10',
						bgColor: '#9f5bfa', //背景颜色
						display: 'ALWAYS' //常显
					}
				};
				let arr = that.marker.concat(newMarker);
				let length = arr.length;
				let last = arr[length - 1];
				that.marker = [last];
				console.log(that.marker, 'that.marker');
				// var that = this;
				// var id = e.currentTarget.id;
				// // var maps = uni.createMapContext(id, this).$getAppMap();
				// var maps = this.mapContext;
				// maps.onclick = function(point) {
				// 	console.log(point);
				// 	point.iconPath = '/static/logo.svg';
				// 	that.markers = that.markers.concat(point);
			},
			/* 获取定位 */
			getGps() {
				console.log('移动了位置');
				//将地图移动到定点位置
				this.mapContext.moveToLocation();
			},
			/* 搜索好友id */
			async getFriendId(phone) {
				let {
					data
				} = await this.$api.get(`/user/userApi/user?phone=${phone}`);
				console.log(data);
				return data.id;
			},
			/* 申请添加好友 */
			async applyAddFriend(ids) {
				let data = {
					comeFrom: 0,
					description: '添加好友',
					friendId: ids || 22,
					remark: 'string'
				};
				let ree = await uni.request({
					url: 'http://192.168.3.5:8080/user/userFriendApi/apply',
					method: 'POST',
					dataType: 'json',
					data: data,
					header: {
						Authorization: `Bearer ${uni.getStorageSync('token')}`
					}
				});
				uni.showToast({
					title: 'sucess'
				});
			},

			/* 打开扫码 */
			qrCode() {
				var that = this;
				// 允许从相机和相册扫码
				uni.scanCode({
					success: async function(res) {
						console.log('扫码结果', res);
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						let phone = res.result;
						let re = await that.$API.userApi.phoneFindUser(phone);
						let id = re.userId;
						let applyData = {
							ucomeFrom: '2',
							udescription: '1手机号 2二维码 3圈子',
							ufriendId: id
						};
						let ree = await that.$API.friendApi.applyAddFriend(applyData);
						uni.showToast({
							title: 'sucess'
						});
						console.log(ree, 'ree');
						// that.applyAddFriend(ids);
					}
				});
			},

			/* 加入邻圈切换 */
			show6Change() {
				this.show6 = !this.show6;
			},

			/* 验证码确定 */
			inputConfirm() {
				console.log(this.password);
			},

			showChange() {
				this.show4 = !this.show4;
			},
			show2Close() {
				this.s1 = !this.s1;
			},

			/* down */
			dowm() {
				//关闭圈子成员弹框
				this.show3 = !this.show3;
				//开启我的家庭弹框
				this.show2 = true;
				//我的家庭切换三角形 复位
				// this.upChange = true;
			},

			/* showLaChange */
			showLa() {
				//换图
				this.picChange = '/static/img/index/54884.svg';
				this.show3 = !this.show3;
				this.s1 = !this.s1;
				this.s2 = !this.s2;
			},
			/* la */
			setScrollHeight(val) {
				// 实时返回的滑动组件高度
				console.log(val, 'val1');
				this.currentHeight = val;
			},
			setScrollViewHeight(val) {
				//最大高度
				console.log(val, 'val2');
				this.scrollViewHeight = val;
			},
			/* 切换tag */
			radioClick(name) {
				this.radios.map((item, index) => {
					item.checked = index === name ? true : false;
				});
			},
			//地图点击事件
			markertap(e) {
				console.log('===你点击了标记点===', e);
			},
			//地图点击事件
			callouttap(e) {
				console.log('气泡点击事件', e);
				let nowLatitude = this.nowLatitude;
				let nowLongitude = this.nowLongitude;
				uni.openLocation({
					latitude: nowLatitude,
					longitude: nowLongitude,
					success: function() {
						console.log('success');
					}
				});
				console.log('选择位置');
			},

			/* 下拉 */
			open() {
				// console.log(this,"this");
				// this.mapheight = 60
				console.log('open');
				this.show = true;
			},
			close22() {
				this.show = false;
				// this.mapheight = 91
				console.log('close ???');
			},
			/* 圈子成员废按 close1 */
			// open1() {
			// 	// console.log(this,"this");
			// 	this.s1 = false;
			// 	this.s2 = true;
			// 	// this.mapheight = 60
			// 	console.log('open');
			// 	this.show1 = true;
			// },
			// close1() {
			// 	this.show1 = false;
			// 	// this.mapheight = 91
			// 	console.log('close');
			// },
			/* 我的家庭切换 */
			open2() {
				// console.log(this,"this");
				console.log('open2');
				this.show2 = true;
			},
			/* 我的家庭切换 */
			close2() {
				console.log('close2');
				//还原图片
				this.picChange = '/static/img/index/548832.svg';
				this.show2 = false;
				this.s1 = !this.s1;
				this.s2 = !this.s2;
				//还原加入邻圈
				this.show6 = true;
			},
			open3() {
				console.log('open3');
				this.show5 = true;
			},
			close3() {
				console.log('close3');
				this.show5 = false;
			},
			/* 添加好友消息页 */
			showAddFriendOpen() {
				this.showAddFriend = true;
				console.log('showAddFriendOpen');
			},
			showAddFriendClose() {
				console.log('showAddFriendClose');
				this.showAddFriend = false;
			},
			go() {
				console.log('go');
				this.$pub.go('/pages/createCircle/createCircle');
			}
		}
	};
</script>

<style lang="scss">
	/* 验证码 */
	::v-deep .xskcodeinput {
		margin-top: 14rpx !important;
	}

	::v-deep .xskcodeinput .box:nth-child(3) {
		margin-right: 20rpx !important;
	}

	::v-deep .xskcodeinput .box:nth-child(4) {
		margin-left: 20rpx !important;
	}

	.tip {
		width: 268rpx;
		// height: 314rpx;
		height: 209rpx;
		background: #4C4C4C;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
		translate: -70% 5%;
	}



	/* 视频 */
	.video {
		width: 686rpx;
		height: 615rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 16rpx 2rpx rgba(0, 0, 0, 0.29);
		opacity: 1;
		border-radius: 18rpx;
	}


	/*  */
	/* 更改tag切换颜色 */
	::v-deep .u-tag--primary {
		background-color: #A054FE !important;
		border-color: #A054FE;

	}

	::v-deep .u-tag--primary text {
		color: #FFF !important;
	}

	/* 自定义搜索 */
	.box {
		flex: 1 // 清空输入框右侧的圆角

		::v-deep .u-search {
			border-radius: 100rpx 100rpx 100rpx 100rpx !important;
		}

		// 输入框前方的放大镜
		::v-deep .u-icon {
			display: none !important;
		}
	}

	.btn {
		height: 64rpx;
		width: 68rpx;
		line-height: 64rpx;
		text-align: center;
		// background: #0268FA;
		border-radius: 0 8rpx 8rpx 0;
		color: #fff;
	}

	.mySearch {
		// width: 398rpx;
		width: 368rpx;
		height: 82rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
		border-radius: 42rpx 42rpx 42rpx 42rpx;
		opacity: 1;
	}



	/* 定位变量 */
	.content {
		.row {
			// margin-left: 46rpx;
			// width: 82rpx;
			// height: 82rpx;
			// background: #FFFFFF;
			// box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
			// opacity: 1;
			// border-radius: 50%;
			// display: flex;
			// justify-content: center;
			// align-items: center;
		}

		// .row2 {
		// 	width: 82rpx;
		// 	height: 188rpx;
		// 	background: #FFFFFF;
		// 	box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
		// 	border-radius: 42rpx 42rpx 42rpx 42rpx;
		// 	opacity: 1;
		// }
		.imgCen {
			image {}
		}


		// .row31 {
		// 	width: 300rpx;
		// 	height: 80rpx;
		// 	background: #9E5AF9;
		// 	box-shadow: 0rpx 4rpx 12rpx 2rpx rgba(0,0,0,0.1);
		// 	border-radius: 40rpx 40rpx 40rpx 40rpx;
		// 	opacity: 1;
		// 	display: flex;
		// 	align-items: center;
		// 	justify-content: space-around;
		// }

		.row3 {
			width: 198rpx;
			height: 80rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 12rpx 2rpx rgba(0, 0, 0, 0.1);
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			opacity: 1;
			display: flex;
			align-items: center;
			justify-content: space-around;
		}
	}

	.fujin1 {

		/* 附近 */
		.fujin {
			width: 168rpx;
			height: 58rpx;
			font-size: 42rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #000000;
			// line-height: 0rpx;
			-webkit-background-clip: text;
			// -webkit-text-fill-color: transparent;
		}

		.btn3 {
			width: 158rpx;
			height: 82rpx;
			// background: #7976E9;
			background: #A054FE;
			border-radius: 42rpx 42rpx 42rpx 42rpx;
			opacity: 1;
		}

		.add {
			width: 48rpx;
			height: 34rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			// line-height: 0rpx;
			-webkit-background-clip: text;
			// -webkit-text-fill-color: transparent;
		}

		.langRen {
			// width: 96rpx;
			// height: 44rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #000000;
			// line-height: 0rpx;
			-webkit-background-clip: text;
			// -webkit-text-fill-color: transparent;
		}

		.num {
			// width: 92rpx;
			// height: 36rpx;
			font-size: 26rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #B4ADAD;
			// line-height: 0rpx;
			-webkit-background-clip: text;
			// -webkit-text-fill-color: transparent;
		}

		.nanShan {
			// width: 156rpx;
			// height: 36rpx;
			font-size: 26rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
			// line-height: 0rpx;
			-webkit-background-clip: text;
			// -webkit-text-fill-color: transparent;
		}

		.play {
			// width: 300rpx;
			// height: 28rpx;
			font-size: 20rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #A1A1A1;
			// line-height: 0rpx;
			-webkit-background-clip: text;
			// -webkit-text-fill-color: transparent;
		}

	}

	.circleGroup {}





	.footer {
		width: 750rpx;
		height: 162rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -20rpx 72rpx 2rpx rgba(0, 0, 0, 0.11);
		border-radius: 82rpx 82rpx 82rpx 82rpx;
		opacity: 1;

		.positons {
			position: relative;
			top: 10%;
			left: 50%;

			.logo {
				width: 112rpx;
				height: 112rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 20rpx 72rpx 2rpx rgba(0, 0, 0, 0.16);
				opacity: 1;
				position: absolute;
				translate: -50% -50%;
				border-radius: 50%;
			}

		}

		.nav {
			padding-top: 48rpx;
			// padding-bottom: 70rpx;
			display: flex;
			justify-content: space-between;
		}
	}
</style>